@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
:root {
  --white: #ffffff;
  --black: #000000;
  --large_font: clamp(1.1rem, 1.45vw + 1.45rem, 1.9rem);
  --medium_font: clamp(0.8rem, 1vw + 1rem, 1.6rem);
  --small_font: clamp(0.5rem, 0.6vw + 0.6rem, 1.1rem);
  --body_font: clamp(0.4rem, 0.5vw + 0.5rem, 0.9rem);
}
/* custom scrollbar */
::-webkit-scrollbar {
  width: 0px;
}
::-webkit-scrollbar-track {
  background: none;
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  display: flex;
  justify-content: center;
}
body {
  background: var(--white);
  position: relative;
  margin: 0;
  padding: 0;
  background-size: 5vw 5vw;
  background-image: 
    linear-gradient(to right,#eeeeee92 0.15rem,transparent 0.15rem),
    linear-gradient(to bottom, #eeeeee92 0.15rem, transparent 0.15rem);
  background-attachment: fixed;
  font-family: "Space Mono", sans-serif;
  width: min(100%, 1700px);
}
#information_title, #footer_title {
  font-size: var(--small_font);
  font-style: italic;
  margin: 2rem 11.5vw 2rem 11.5vw;
  font-weight: 400;
  animation: shrink_in 0.75s;
}
#grid_section {
  margin: 0 11.5vw 0 11.5vw;
}
#grid_container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2rem;
}
.grid_item {
  position: relative;
  border-radius: 15px;
  background: var(--black);
  animation: shrink_in 0.75s;
  transform: skewy(0deg);
  transition: all 0.25s;
  box-shadow: 3px 3px 10px #eeeeee;
}
.grid_item:hover {
  transform: skewy(-2deg);
}
.item_1 {
  grid-area: 1 / 1 / 2 / 4;
  background: #007FFF;
}
.item_2 {
  grid-area: 1 / 4 / 2 / 5;
  background: #7D83FF;
}
.item_3 {
  grid-area: 2 / 2 / 3 / 3;
  background: #BD2D87;
}
.item_4 {
  grid-area: 2 / 1 / 3 / 2;
  background: #0f90cc;
}
.item_5 {
  grid-area: 3 / 1 / 4 / 4;
  background: #F78764;
}
.item_6 {
  grid-area: 2 / 3 / 3 / 4;
  background: #0DAB76;
}
.item_7 {
  grid-area: 2 / 4 / 4 / 5;
  background: #4E586E;
}
.item_8 {
  grid-area: 4 / 3 / 5 / 5;
  background: #EA526F;
}
.item_9 {
  grid-area: 4 / 1 / 5 / 3;
  background: #23B5D3;
}
.grid_item_title {
  color: var(--white);
  font-size: var(--small_font);
  font-weight: 700;
  font-style: italic;
  margin: clamp(1rem, 1vw + 0.8rem, 1.5rem);
  width: auto;
}
.grid_item_para {
  color: var(--white);
  font-size: var(--body_font);
  font-weight: 400;
  margin: clamp(-0.5rem, -0.5vw + 0.4rem, -0.75rem) clamp(1rem, 1vw + 0.8rem, 1.5rem) clamp(1rem, 1vw + 0.8rem, 1.5rem) clamp(1rem, 1vw + 0.8rem, 1.5rem);
}
#github_container {
  margin: clamp(1rem, 1vw + 0.8rem, 1.5rem);
  height: 0;
}
a,
a:link,
a:visited,
a:active {
  text-decoration: underline;
  color: var(--white);
  border: none;
}
#birthday_progress {
  margin: clamp(1rem, 1vw + 0.8rem, 1.5rem);
  position: relative;
}
#loading_bar {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #eeeeee;
  height: 0.5rem;
  border-radius: 500px;
}
#full_bar {
  width: 100%;
  height: 0.5rem;
  background-color: #eeeeee92;
  border-radius: 500px;
}
.flex_container {
  display: flex;
  flex-direction: row;
  align-content: baseline;
  margin: 0;
  margin-top: clamp(-1rem, -1vw + 0.8rem, -1.5rem);
  margin-bottom: clamp(0.5rem, 0.5vw + 0.4rem, 0.75rem);
}
#weather_temp {
  color: var(--white);
  font-size: var(--large_font);
  margin: 0 clamp(1rem, 1vw + 0.8rem, 1.5rem);
}
#weather_img {
  width: clamp(1.5rem, 2vw + 1.5rem, 2.25rem);
  height: auto;
  margin: 0  clamp(1rem, 1vw + 0.8rem, 1.5rem);
}
#weather_para {
  margin-bottom: clamp(0.2rem, 0.2vw + 0.15rem, 0.4rem);
}
#weather_link {
  margin: 0 clamp(1rem, 1vw + 0.8rem, 1.5rem)  clamp(1rem, 1vw + 0.8rem, 1.5rem)  clamp(1rem, 1vw + 0.8rem, 1.5rem);
}
@keyframes shrink_in {
  0% {
    opacity: 0;
    transform: scale(3.0);
  } 100% {
    opacity: 1;
    transform: scale(1.0);
  }
}

/* portrait screens */
@media screen and (orientation: portrait) {
  :root {
    --large_font: clamp(1.3rem, 1.75vw + 1.75rem, 2.5rem);
    --medium_font: clamp(1rem, 1.25vw + 1.25rem, 2rem);
    --small_font: clamp(0.7rem, 0.75vw + 0.75rem, 1.25rem);
    --body_font: clamp(0.6rem, 0.65vw + 0.65rem, 1.05rem);
  }
  body {
    background-size: 12.5vw 12.5vw;
  }
  #information_title {
    margin: 3.2rem 7.5vw 1rem 7.5vw;
  }
  #grid_section {
    margin: 0 7.5vw 0 7.5vw;
  }
  #grid_container {
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, auto);
  }
  .item_1 { grid-area: 1 / 1 / 2 / 3; }
  .item_2 { grid-area: 4 / 1 / 5 / 2; }
  .item_3 { grid-area: 4 / 2 / 4 / 3; } 
  .item_4 { grid-area: 2 / 2 / 3 / 3; }
  .item_5 { grid-area: 5 / 1 / 5 / 3; }
  .item_6 { grid-area: 2 / 1 / 3 / 2; }
  .item_7 { grid-area: 3 / 1 / 3 / 3; } 
  .item_8 { grid-area: 7 / 1 / 8 / 3; }
  .item_9 { grid-area: 6 / 1 / 7 / 3; }
  #github_container {
    height: auto;
  }
  #footer_title {
    margin: 0rem 7.5vw 2rem 7.5vw;
  }
}
/* prevent hover on touchscreens */
@media(hover: none) {
  .grid_item:hover {
    transform: skewY(0deg);
  }
}